

<template>
  <view class="Mall4j">
    <!-- 积分兑换商品详情 -->
    <view class="container">
      <!-- 轮播图 -->
      <view class="swiper-con">
        <view v-if="video && isPlaying" class="video-container">
          <video id="myVideo" enable-progress-gesture="false" objectFit="fill" :src="video" controls @ended="playEnd" />
        </view>
        <view v-if="video" class="play-btn" @tap="videoOper">
          <image v-if="!isPlaying" class="play-icon" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/play-red.png" />
          <text v-else :class="'play-text' + isPlaying ? 'video-stop':''">{{ isPlaying?'退出播放': '' }}</text>
        </view>
        <swiper v-if="!isPlaying" :circular="autoplay" :indicator-dots="indicatorDots" :autoplay="autoplay" :indicator-color="indicatorColor" :interval="interval" :duration="duration" :indicator-active-color="indicatorActiveColor">
          <block v-for="(item, index) in imgs" :key="index">
            <swiper-item>
              <image :src="item" />
            </swiper-item>
          </block>
        </swiper>
      </view>
      <!-- 轮播图end -->

      <!-- 商品信息 -->
      <view class="prod-info">
        <view class="tit-wrap">
          <view class="prod-tit">{{ prodName }}</view>
        </view>
        <view class="sales-p">{{ brief }}</view>

        <!-- 积分商品价格 -->
        <view v-if="defaultSku" class="integral-prod-price">
          <text v-if="defaultSku.price">{{ wxs.parsePrice(defaultSku.price)[0] }}.{{ wxs.parsePrice(defaultSku.price)[1] }}{{ i18n.yuan }} +</text>{{ defaultSku.skuScore }} {{ i18n.integral }}
        </view>
      </view>
      <!-- 商品信息end -->

      <!-- 已选规格 -->
      <prod-sku-select v-if="(pic && prodType !== 1) || (prodType === 1 && groupInfoLoaded)" :pic="pic" :sku-list="skuList" :default-price="defaultPrice" :prod-type="prodType" :prod-num="prodNum" :page-type="3" :sku-show="skuShow" @setSku="setSku" @showSku="showSku" @closeSkuPop="closePopup" @buyNow="redeemNow" @setProdNum="setProdNum" />
      <!-- 已选规格 end -->

      <!-- 商品详情 -->
      <view class="prod-detail">
        <view>
          <rich-text :nodes="content" />
        </view>
      </view>
      <!-- 商品详情end -->
    </view>

    <!-- 积分 底部按钮 -->
    <view class="ex-integral-foot">
      <view class="ex-integral-btn" @tap="redeemNow">{{ i18n.redeemNow }}</view>
    </view>
    <!-- </view> -->

  </view>
</template>

<script module="wxs" lang="wxs" src="../../../wxs/number.wxs"></script>

<script>
// pages/prod/prod.js
var http = require("../../../utils/http.js");
var config = require("../../../utils/config.js");
var util = require("../../../utils/util.js");
import coupon from "@/components/coupon/index.vue";
import commStar from "@/components/comm-star/index.vue";
import prodSkuSelect from "@/components/prod-sku-select/index.vue";

export default {
  data () {
    return {
      shopId: 1,
      shopName: '',
      picDomain: config.picDomain,
      indicatorDots: true,
      indicatorColor: '#f2f2f2',
      indicatorActiveColor: '#eb2444',
      isAuthInfo: true,
      autoplay: true,
      interval: 3000,
      duration: 1000,
      prodNum: 1,
      totalCartNum: 0,
      groupActivityId: 0,
      pic: "",
      imgs: '',
      prodName: '',
      price: 0,
      actPrice: 0,
      content: '',
      prodId: 0,
      brief: '',
      skuId: 0,
      popupShow: false,
      skuShow: false,
      skuGroupShow: false,
      commentShow: false,
      skuList: [],
      findSku: true,
      defaultSku: undefined,
      isCollection: false,
      skuShowType: 0,
      // sku的显示类型 0普通sku 1拼团sku
      totalStocks: 0, //库存量
      scorePrice: 0,
      defaultPrice: 0,
      videoContext: '', // 视频组件
      isPlaying: false, // 视频是否播放中
      video: "",
      videoDuration: "",
      prodType: 3
    };
  },

  components: {
    coupon,
    commStar,
    prodSkuSelect
  },
  props: {},

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      prodId: options.prodId
    });

    // 加载商品信息
    this.getProdInfo();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.videoContext = uni.createVideoContext('myVideo');
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 设置头部导航标题
    uni.setNavigationBarTitle({
      title: this.i18n.commodityDetails
    });
    this.setData({
      totalCartNum: getApp().globalData.totalCartCount
    });
    // 查看用户是否关注
    this.getCollection();
  },

  /**
   * 页面隐藏时触发
   */
  onHide: function () {
    this.skuShow = false
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () { },
  methods: {
    /**
    * 修改商品的sku
    */
    setSku (sku, findSku) {
      this.findSku = findSku
      this.defaultSku = sku
    },

    /**
     * 修改商品数量
     */
    setProdNum (prodNum) {
      this.prodNum = prodNum
    },

    /**
     * 获取是否关注信息
     */
    getCollection () {
      var params = {
        url: "/p/user/collection/isCollection",
        method: "GET",
        data: {
          prodId: this.prodId
        },
        callBack: res => {
          this.setData({
            isCollection: res
          });
        }
      };
      http.request(params);
    },

    /**
     * 获取商品信息
     */
    getProdInfo () {
      var params = {
        url: "/score/prod/prodInfo",
        method: "GET",
        data: {
          prodId: this.prodId
        },
        callBack: res => {
          var imgStrs = res.imgs;
          var imgs = imgStrs.split(",");
          var content = util.formatHtml(res.content);
          this.setData({
            imgs: imgs,
            content: content,
            price: res.price,
            prodName: res.prodName,
            groupActivityId: res.groupActivityId,
            prodId: res.prodId,
            brief: res.brief,
            totalStocks: res.totalStocks,
            // skuId: res.skuId
            skuList: res.skuList,
            totalStocks: res.totalStocks,
            // 库存量
            pic: res.pic,
            shopId: res.shopId,
            video: res.video ? res.video : '',
            // 积分价格
            scorePrice: res.scorePrice,
            // 默认价格
            defaultPrice: res.price,
            // 商品类型
            prodType: res.prodType
          });
          // 初始化视频
          if (res.video) {
            this.$nextTick(() => {
              this.videoContext = uni.createVideoContext('myVideo', this)
            })
          }
        }
      };
      http.request(params);
    },

    /**
     * 立即兑换
     */
    redeemNow () {
      if (this.isPlaying) {
        this.stopPlay()
      }
      if (!this.findSku) {
        return;
      }
      if (!this.skuShow) {
        this.skuShow = true
        return
      }
      if (this.prodNum > this.defaultSku.stocks) {
        uni.showToast({
          title: this.i18n.insufficientStock,
          icon: 'none',
          duration: 1000,
          mask: true
        });
        return;
      }
      if (this.prodNum < 1 || !this.prodNum) {
        uni.showToast({
          title: this.i18n.leastTips,
          icon: 'none',
          duration: 2000
        });
        this.prodNum = 1
        return;
      }
      if (this.totalStocks < 0) {
        uni.showToast({
          title: this.i18n.insufficientProductInventory,
          icon: 'none',
          duration: 2000
        });
        return;
      }

      util.checkAuthInfo(() => {
        uni.setStorageSync("orderItem", JSON.stringify({
          prodId: this.prodId,
          skuId: this.defaultSku.skuId,
          prodCount: this.prodNum,
          shopId: this.shopId,
          distributionCardNo: this.distributionCardNo
        }));
        uni.navigateTo({
          url: '/package-member-integral/pages/integral-submit-order/integral-submit-order?orderEntry=1'
        });
      });
    },
    /**
     * 跳转到首页
     */
    toHomePage: function () {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },

    // sku弹框
    showSku () {
      if (this.isPlaying) {
        this.stopPlay()
      }
      this.skuShow = true
    },
    // 关闭规格弹窗
    closePopup: function () {
      this.setData({
        popupShow: false,
        skuShow: false,
        commentShow: false
      });
    },

    /**
     * 视频信息
     */
    getVideoInfo () {
      uni.request({
        url: this.video + '?avinfo',
        success: res => {
          let time = Number(res.data.format.duration).toFixed(0);
          this.setData({
            videoDuration: time < 60 ? '00′' + time + '″' : parseInt(time / 60) + '′' + time % 60 + '″'
          });
        }
      });
    },
    /**
     * 视频播放/停止按钮
     */
    videoOper () {
      util.tapLog(3)
      if (this.isPlaying) {
        this.stopPlay()
      } else {
        this.startPlay()
      }
    },
    playEnd () {
      this.stopPlay()
    },

    startPlay () {
      this.setData({
        isPlaying: true,
      })
      setTimeout(() => {
        this.videoContext.seek(0)
        this.videoContext.play()
      }, 200)
    },
    stopPlay () {
      this.setData({
        isPlaying: false
      })
      setTimeout(() => {
        this.videoContext.seek(0)
        this.videoContext.stop()
      }, 200)
    },

  }
};
</script>
<style>
@import "./convert-prod-det.css";
</style>
